<template>
  <div>
    <!-- 搜索页面头部 -->
    <div class="search-header">
      <!-- 后退按钮 -->
      <van-icon
        name="arrow-left"
        color="white"
        size="0.48rem"
        class="goback"
        @click="$router.back()"
      ></van-icon>
      <!-- 搜索组件 -->
      <van-search
        v-model.trim="keyword"
        v-fofo
        placeholder="请输入搜索关键词"
        shape="round"
        background="#575b60"
        class="search"
        @input="inputFn"
        @search="searchFn"
      />
    </div>
    <!-- 搜索建议列表 -->
    <div class="sugg-list" v-if="keyword.length !== 0">
      <div
        class="sugg-item"
        v-for="(item, index) in suggestList"
        :key="index"
        v-html="lightFn(item, keyword)"
        @click="suggestClickFn(item)"
      ></div>
      <!-- van-cell不支持v-html的使用 -->
      <!-- <van-cell
        v-for="(item, index) in suggestList"
        :key="index"
        v-html="lightFn(item, keyword)"
        >{{ item }}
      </van-cell> -->
    </div>

    <!-- 搜索历史 -->
    <div class="search-history" v-else>
      <!-- 标题 -->
      <van-cell title="搜索历史">
        <!-- 使用right-icon插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon
            name="delete"
            class="search-icon"
            @click="delFn"
          ></van-icon> </template
      ></van-cell>

      <!-- 历史列表 -->
      <div class="history-list">
        <span
          class="history-item"
          v-for="(item, index) in history"
          :key="index"
          @click="historyClickFn(item)"
          >{{ item }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { suggestListAPI } from "@/api";
export default {
  name: "Search",
  data() {
    return {
      keyword: "", //搜索关键字
      timer: null, //防抖的定时器
      suggestList: [], //存储联想列表数据
      history: JSON.parse(localStorage.getItem("his")) || [], //搜索历史
    };
  },
  methods: {
    // 输入框内容实时改变触发的函数
    inputFn() {
      // 防抖操作：延时执行逻辑代码，事件再次触发时，清除上一个定时器
      clearTimeout(this.timer);
      if (this.keyword.length === 0) return (this.suggestList = []);
      this.timer = setTimeout(async () => {
        // console.log(this.keyword);
        const { data: res } = await suggestListAPI({
          keywords: this.keyword,
        });
        // console.log(res);
        this.suggestList = res.data.options;
      }, 300);
    },
    // 专门处理字符串高亮关键字
    lightFn(originStr, targetStr) {
      // originStr:代表原来的字符串
      // targetStr:关键字
      // 字符串方法：.replace()
      // 返回值：替换后的完整字符串
      const reg = new RegExp(targetStr, "ig");

      // 替换后的值不能用target
      // 例如：输入框里java，匹配回来的联想菜单java，Java,JAVA，都被replace替换了
      return originStr.replace(reg, (match) => {
        // match就是匹配中时，原字符穿里的那个字符，用人家原来的既可
        // 只不过这边给了一个颜色就行
        return `<span style="color:red;">${match}</span>`;
      });
    },
    // 封装路由跳转
    moveFn(theKW) {
      // 坑：路由跳转，在watch之前执行，所以我们要让路由跳转来一个定时器包裹，
      // 变更函数执行顺序，让跳转最后执行
      setTimeout(() => {
        this.$router.push({
          path: `/search_result/${theKW}`,
        });
      }, 0);
    },
    // 输入框搜索事件
    searchFn() {
      // 将搜索的内容保存到搜索历史记录里
      if (this.keyword.length > 0) {
        this.history.push(this.keyword);

        this.moveFn(this.keyword);
      }
      // this.$router.push({
      //   path: `/search_result/${this.keyword}`,
      // });
    },
    // 联想菜单的点击事件
    suggestClickFn(item) {
      // 将点击的内容保存到搜索历史记录里
      this.history.push(item);
      this.moveFn(item);
      // this.$router.push({
      //   path: `/search_result/${item}`,
      // });
    },
    // 历史记录的点击事件
    historyClickFn(item) {
      this.moveFn(item);
      // this.$router.push({
      //   path: `/search_result/${item}`,
      // });
    },
    // 删除历史记录事件
    delFn() {
      this.history = [];
    },
  },
  //watch侦听器的使用
  watch: {
    history: {
      //侦听历史数组的改变
      deep: true, //深度侦听
      handler() {
        // 只要侦听到了，立刻覆盖式的保存到本地
        const theSet = new Set(this.history); //数组去重，set返回的是一个对象类型
        const arr = Array.from(theSet); //set对象类型，转为数组类型
        localStorage.setItem("his", JSON.stringify(arr));
      },
    },
  },
};
</script>

<style scoped lang="less">
.search-header {
  height: 46px;
  display: flex;
  align-items: center;
  background-color: #575b60;
  overflow: hidden;
  /*后退按钮*/
  .goback {
    padding-left: 14px;
  }
  /*搜索组件*/
  .van-search {
    flex: 1;
  }
}
// 搜索建议
.sugg-list {
  .sugg-item {
    padding: 0 15px;
    border-bottom: 1px solid #f8f8f8;
    font-size: 14px;
    line-height: 50px;
    // 实现省略号的代码
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
// 搜索历史
.history-list {
  padding: 0 10px;
  .history-item {
    display: inline-block;
    font-size: 12px;
    padding: 8px 14px;
    background-color: #efefef;
    margin: 10px 8px 0px 8px;
    border-radius: 10px;
  }
}
</style>